<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入swiper轮播图的css -->
    <link rel="stylesheet" href="./lib/swiper-bundle.min.css">
    <!-- 引入iconfont字体css -->
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3349201_jda2zq0omfo.css">
    <!-- 引入本页面的样式 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header class="title">
        <span>小米有品</span>
        <p>
            <img src="./images/search.png" alt="">
            <input type="text" name="" placeholder="xiaomi 12 pro">
        </p>
    </header>
    <!-- 主体内容 -->
    <main class="main">
        <!-- 轮播图 -->
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./images/banner1.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/banner2.png" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="./images/banner3.png" alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <ul class="list">
            <li><p><span>每日上新</span></p></li>
            <li><p><span>小米众筹</span></p></li>
            <li><p><span>BEST</span></p></li>
            <li><p><span>热销排行</span></p></li>
            <li><p><span>小米自营</span></p></li>
            <li><p><span>名品折扣</span></p></li>
            <li><p><span>超赞精品</span></p></li>
            <li><p><span>有品直播</span></p></li>
            <li><p><span>生活超市</span></p></li>
            <li><p><span>天天福利</span></p></li>
        </ul>
        <img src="./images/m3.png" alt="">
        <section class="section1">
            <ul class="menu">
                <li class="menu-list">
                    <img src="./images/s1.png" alt="">
                    <p>速干夹克衫<br><span>每款低至5折,快来抢购</span></p>
                </li>
                <li class="menu-list">
                    <img src="./images/s2.png" alt="">
                    <p>扫地机器人<br><span>六折起步,扫除烦恼</span></p>
                </li>
                <li class="menu-list">
                    <img src="./images/s3.png" alt="">
                    <p>落地电风扇<br><span>吹走闷热带来清凉</span></p>
                </li>
                <li class="menu-list">
                    <img src="./images/s4.png" alt="">
                    <p>小清新风扇<br><span>迷你小风扇让你爱不释手</span></p>
                </li>
                <li class="menu-list">
                    <img src="./images/s5.png" alt="">
                    <p>热销净水器<br><span>喝水我只喝纯净水</span></p>
                </li>
                <li class="menu-list">
                    <img src="./images/s6.png" alt="">
                    <p>公网对讲机<br><span>是谁在耳边说爱我永不变</span></p>
                </li>
            </ul>
            <!-- 微淘众筹 -->
            <article class="art1">
                <div class="art1-title">
                    <h3>微淘众筹</h3><span>更多></span>
                </div>
                <div class="art-d1">
                    <div>
                        <p>大屏学习机</p>
                        <div>国际护眼认证|双摄像头设计|远程监课|...</div>
                        <span>￥1999</span>
                    </div>
                    <img src="./images/xxj_03.png" alt="">
                </div>
                <div class="art-d2">
                    <img src="./images/hot_03.png">支持人数<span>730</span>/完成度<span>146%</span></p>
                    <div></div>
                </div>
                <div class="art-dd2">
                    <div class="art-d3">
                        <div>
                            <p>智能门锁</p>
                            <span>￥1999</span>
                        </div>
                        <img src="./images/ms_03.png" alt="">
                        <div class="art-d4">
                            <img src="./images/hot_03.png">支持人数<span>680</span></p>
                            <div></div>
                        </div>
                    </div>
                    <div class="art-d3">
                        <div>
                            <p>柔软沙发</p>
                            <span>￥1599</span>
                        </div>
                        <img src="./images/sf_03.png" alt="">
                        <div class="art-d4">
                            <img src="./images/hot_03.png">支持人数<span>999</span></p>
                            <div></div>
                        </div> 
                    </div>                
                </div>
            </article>
            <!-- 好物榜 -->
            <article class="art2">
                <h3>好物榜</h3>
                <div>
                    <img src="./images/m4_03.png" alt="">
                    <img src="./images/m5_03.png" alt="">
                    <img src="./images/m6_03.png" alt="">
                </div>
            </article>
            <!-- 热销榜 -->
            <article class="art3">
                <div class="art3-d1">
                    <h3>热销榜<span>排序由销量、搜索、好评等综合得出</span></h3>
                    <span>更多></span>
                </div> 
                <div class="art3-d2">
                    <div>
                        <img src="./images/m7_03.png" alt="">
                        <p>智能扫地机器人</p>
                        <p>米家扫地机器人</p>
                    </div>
                    <div>
                        <img src="./images/m8_03.png" alt="">
                        <p>21:9超宽鱼屏</p>
                        <p>小米显示器34英寸</p>
                    </div>
                    <div>
                        <img src="./images/m9_03.png" alt="">
                        <p>AI语音控制</p>
                        <p>云米大屏冰箱450L</p>
                    </div>
                </div>
            </article>
            <!-- 限时购 -->
            <article class="art4">
                <div class="art4-d1">
                    <h3>限时购<span>十点场</span>
                        <span>00</span><strong>:</strong>
                        <span>00</span><strong>:</strong>
                        <span>00</span>
                    </h3>
                    <span>更多></span>
                </div>
                <div class="art4-d2">
                    <div>
                        <img src="./images/xg1_03.png" alt="">
                        <p>￥1299<span>1699</span></p>
                    </div>
                    <div>
                        <img src="./images/xg2_03.png" alt="">
                        <p>￥299<span>449</span></p>
                    </div>
                    <div>
                        <img src="./images/xg3_03.png" alt="">
                        <p>￥45<span>59</span></p>
                    </div>
                </div>
            </article>
            <!-- 特卖汇 -->
            <article class="art5">
                <div class="art5-d1">
                    <h3>特卖汇</h3>
                    <p>精选品牌特卖</p>
                    <img src="./images/tmh1_03.png" alt="">
                </div>
                <div class="art5-d1">
                    <h3>优惠中心</h3>
                    <p>天天享优惠</p>
                    <img src="./images/tmh2_03.png" alt="">
                </div>
                <div class="art5-d1">
                    <h3>选购指南</h3>
                    <p>达人教你买</p>
                    <img src="./images/tmh3_03.png" alt="">
                </div>
                <div class="art5-d1">
                    <h3>好店精选</h3>
                    <p>逛好店享优惠</p>
                    <img src="./images/tmh4_03.png" alt="">
                </div>
            </article>
        </section>
        <section class="section2">
            <div class="s2-title">
                <div>
                    <h2>推荐</h2>
                    <p>猜你喜欢</p>
                </div>
                <span>|</span>
                <div>
                    <h3>618</h3>   
                    <p>超值抢购</p>   
                </div>
                <span>|</span>
                <div>
                    <h3>智能</h3>   
                    <p>未来已来</p>   
                </div>
                <span>|</span>
                <div>
                    <h3>电器</h3>   
                    <p>重塑生活</p>   
                </div>
                <span>|</span>
                <div>
                    <h3>生活</h3>   
                    <p>品质生活</p>   
                </div>
            </div>
            <div class="s2-main">
                <div>
                    <img src="./images/m1.jpeg" alt="">
                    <p>现代极简功能沙发</p>
                    <p>巴西进口头层牛皮</p>
                    <p><span>￥2079</span>...</p>
                </div>
                <div>
                    <img src="./images/m2.jpeg" alt="">
                    <p>台式净饮机冷热版</p>
                    <p>小爱控制,14米送风,7羽叶</p>
                    <p><span>￥2499</span>...</p>
                </div>
                <div>
                    <img src="./images/m3.jpeg" alt="">
                    <p>婴儿监护器</p>
                    <p>小爱控制,14米送风,7羽叶</p>
                    <p><span>￥39</span>...</p>
                </div>
                <div>
                    <img src="./images/m4.jpeg" alt="">
                    <p>双显变频洗烘一体机</p>
                    <p>小爱控制,14米送风,7羽叶</p>
                    <p><span>￥399</span>...</p>
                </div>
            </div>
        </section>
    </main>
    <footer class="footer">
        <div class="iconfont icon-shouye">
            <p>首页</p> 
        </div>
        <div class="iconfont icon-fenlei">
            <p>分类</p>
        </div>
        <div class="iconfont icon-shenghuo">
            <p>生活</p>
        </div>
        <div class="iconfont icon-gouwuche">
            <p>购物车</p>
        </div>
        <div class="iconfont icon-wode">
            <p>我们</p>
        </div>
    </footer>
    <!-- 引入swipwer插件js -->
    <script src="./lib/swiper-bundle.min.js"></script>
    <!-- 引入本页面js -->
    <script src="./js/index.js"></script>
</body>
</html>